<script setup>
import { ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
let msg = ref("hello");
let flag = ref(true);
setTimeout(() => {
  msg.value = "hi";
}, 3000);
setTimeout(() => {
  flag.value = false;
}, 5000);
</script>

<template>
  <HelloWorld v-if="flag" :msg="msg" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
